<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0px;
            top: 0px;
            background: red;
            cursor: move;
        }

        .box2 {
            position: absolute;
            width: 50px;
            height: 50px;
            background: skyblue;
            left: 200px;
            top: 0px;
            /* cursor: move; */
        }

        .box3 {
            position: absolute;
            width: 400px;
            height: 400px;
            background: yellow;
            left: 500px;
            top: 0px;
            /* cursor: move; */
        }

        .hidden {
            display: none;
        }

    </style>
</head>

<body>
    <div class="box" id="drag"></div>
    <div class="box2" id="source" draggable="false"></div>
    <div class="box3" id="target"></div>
    <img src="../imges/bg.jpg" class="hidden" />
    <script>
        window.onload = function () {
            var drag = document.getElementById('drag');

            // //点击某物体时，用drag对象即可，move和up是全局区域，
            // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)  
            drag.onmousedown = function (event) {
                var event = event || window.event;  //兼容IE浏览器
                //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
                var diffX = event.clientX - drag.offsetLeft;
                var diffY = event.clientY - drag.offsetTop;
                if (typeof drag.setCapture !== 'undefined') {
                    drag.setCapture();
                }
                document.onmousemove = function (event) {
                    var event = event || window.event;
                    var moveX = event.clientX - diffX;
                    var moveY = event.clientY - diffY;
                    if (moveX < 0) {
                        moveX = 0
                    } else if (moveX > window.innerWidth - drag.offsetWidth) {
                        moveX = window.innerWidth - drag.offsetWidth
                    }
                    if (moveY < 0) {
                        moveY = 0
                    } else if (moveY > window.innerHeight - drag.offsetHeight) {
                        moveY = window.innerHeight - drag.offsetHeight
                    }
                    drag.style.left = moveX + 'px';
                    drag.style.top = moveY + 'px'
                }
                document.onmouseup = function (event) {
                    this.onmousemove = null;
                    this.onmouseup = null;
                    //修复低版本ie bug  
                    if (typeof drag.releaseCapture != 'undefined') {
                        drag.releaseCapture();
                    }
                }
            }

            var source = document.getElementById('source');
            source.ondragstart = function (event) {
                var e = event || window.event
                let image = document.querySelector('img').cloneNode();
                e.dataTransfer.setDragImage(image, 200, 50);
                console.log('开始拖拽');
            }
            source.ondrag = function () {
                // console.log('拖拽中');
            }
            source.ondragend = function () {
                console.log('拖拽结束');
            }


            var target = document.getElementById('target');

            target.ondragenter = function(){
                console.log('进入目标元素')
            }
            target.ondragover = function(e){
                // console.log(e);
                var event = e || window.event;
                console.log('在目标元素中拖拽');
                event.preventDefault()
            }
            target.ondragleave = function(){
                console.log('拖放离开目标元素')
            }
            target.ondrop = function(e){
                console.log(e);
                console.log('拖放');
                var e = e || window.event;
 
            }
        }

        
    </script>
</body>

</html>